"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/16
 */
import * as React from 'react'

const {View, StyleSheet,TouchableOpacity,ImageBackground,ScrollView} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";
import MyImagePicker from "../../component/MyImagePicker";
import {SCREEN_WIDTH} from "../../constant";
import MyText from "../../component/MyText";
import Colors from "../../assets/styles/Colors";
import Request from "../../utils/Request";
import {toastValidateError} from "../../utils/tools";
const {createForm, createFormField} = require('rc-form');
const {List, InputItem, Picker, Button, TextareaItem} = require('antd-mobile');
const newStyle = {};
let TextAreaStyle = require('antd-mobile/lib/textarea-item/style/index.native');

for (const key in TextAreaStyle) {
    if (Object.prototype.hasOwnProperty.call(TextAreaStyle, key)) {
        newStyle[key] = {...StyleSheet.flatten(TextAreaStyle[key])};
        if (key === 'container') {
            newStyle[key].marginLeft = 0;
            newStyle[key].borderBottomWidth = 0;
            newStyle[key].borderBottomColor = 'transparent';
        }
    }
}
class ShopManagerPage extends React.Component<AuthComponent, any> {
    imagePicker: MyImagePicker;

    constructor(props: any, context: any) {
        super(props, context);
        this.state = {
            store_img:null
        };
        this.imagePicker = new MyImagePicker();
        this.imagePicker.options.pickerOptions.allowsEditing = true;
        this.imagePicker.options.cropOptions.width = SCREEN_WIDTH;
        this.imagePicker.options.cropOptions.height = autoSize(SCREEN_WIDTH);
    }


    componentDidMount(): void {
        // console.log(this.props.auth);
    }

//图片选择
    selectedHeaderImage = () => {
        this.imagePicker.options.pickerOptions.allowsEditing = true;
        this.imagePicker.showImagePicker().then(response => {
            this.setState({store_img:{
                uri: response['path'],
                type: 'application/octet-stream',
                name: response['fileName']
            }});
        }).catch(e => {
            console.log(e);
        })
    };

    onSave = ()=>{
        const {dispatch, form} = this.props;
        form.validateFields((error, value) => {
            if (!error) {
                if (this.state.store_img) {
                    const payload = {...value,store_img:this.state.store_img};
                    dispatch({
                        type:'auth/editStore',
                        payload
                    })
                }else {
                    toastValidateError(null,'店铺图片未选择');
                }
            } else {
                toastValidateError(error);
            }
        });
    };
    //头部
    renderHeader = () => {
        return (
            <TouchableOpacity onPress={this.selectedHeaderImage.bind(this, 'store_img')}>
                <ImageBackground style={[commonStyles.centerVH, {width: SCREEN_WIDTH, height: autoSize(SCREEN_WIDTH)}]}
                                 source={this.state.store_img ? {uri: this.state.store_img.uri} : {uri:Request.checkImageUrl(this.props.auth.profile.store_image)}}
                >

                </ImageBackground>
            </TouchableOpacity>
        )
    };

    render() {
        const {getFieldProps} = this.props.form;
if(!this.props.auth.isSignIn){
    return null;
}
        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               title={{title: this.props.title, tintColor: '#fff'}}
                />
                <ScrollView>
                    <List renderHeader={this.renderHeader}>

                        <InputItem {...getFieldProps('store_name', {
                            initialValue: this.props.auth.profile.store_name,
                            rules: [
                                {required: true, message: '店铺名称未填写'},
                            ]
                        })}
                                   placeholder='输入店铺名称'
                                   clear
                                   labelNumber={4}>店铺名称</InputItem>



                        <View style={{padding: 14}}>
                            <MyText color={Colors.Black}>店铺介绍</MyText>
                            <View style={{paddingHorizontal: 20}}>
                                <View style={{
                                    borderWidth: 1,
                                    borderColor: '#d0d0d0',
                                    borderRadius: 10,
                                    padding: 5,
                                    marginTop: 10
                                }}>
                                    <TextareaItem
                                        {...getFieldProps('description', {
                                            initialValue: this.props.auth.profile.store_introduced,
                                            rules: [
                                                {required: true, message: '店铺介绍未填写'},
                                            ],
                                        })}
                                        styles={StyleSheet.create(newStyle)}
                                        rows={5}
                                        count={100}
                                    />
                                </View>
                            </View>
                        </View>

                        <View style={{padding: 10}}>
                            <Button type={'primary'}
                                    style={{height: 35}}
                                    loading={this.props.auth.loading}
                                    disabled={this.props.auth.loading}
                                    onClick={this.onSave}>保存</Button>
                        </View>
                    </List>
                </ScrollView>
            </View>
        );
    }
}
const Wrapper = createForm()(ShopManagerPage);

export default connect(
    ({auth}) => ({auth})
)(Wrapper);

